<template>
	<view class="bottomTag">
		<view class="content-100h">
			<image class="width100" :src="image" mode="widthFix"></image>
			<view class="marginTop marginLeft textblack18 bold">{{name}}</view>
			<view class="marginLeft marginBottom marginRight line">
				<view class="column ">
					<view class="width100">{{author}}</view>
					<view>{{item.createTime}}</view>
				</view>
				<view class="bigEmpty"> </view>
				<image style="width: 100rpx;" mode="widthFix" src="/static/icon-information-action.png"></image>
			</view>

			<view class="lineGray marginTop"></view>
			<view class="margin" v-html="web">
			</view>
			<view class="lineGray marginTop"></view>
			<view class="line  padding">
				<view>评论：{{commentList.length}}条</view>
				<view class="bigEmpty"></view>
				<view>举报</view>
			</view>
			<view class="lineGray marginRight marginLeft"></view>
			<view class="column padding-large" v-show="commentList.length==0">
				<view>
					<image class="image-small" src="/static/empty-comment.png"></image>
				</view>
				<view>暂时还没有评论</view>
				<view>快来说说你的看法吧</view>
			</view>
			<view v-show="commentList.length!=0">
				<view v-for="(item,index) in commentList">
					<view class="padding">
						<view class="line" @click="commendItemClick(item,item.child)">
							<image class="image-head-small" :src="item.user.avator"></image>
							<view class="marginLeft">{{item.user.name}}</view>
							<view class="marginLeft bigEmpty">{{item.createTime}}</view>
						</view>
						<view class="marginTop">{{item.content}}</view>
						<view class="marginLeft bg-gray-circle-rect marginTop" v-show="item.child.length!=0">
							<view class="padding " v-for="(inItem,index) in item.child"
								@click="commendItemClick(inItem,item.child)">
								<view class="line">
									<image class="image-head-small" :src="inItem.user.avator"></image>
									<view class="marginLeft">{{inItem.user.name}}</view>
									<view class="marginLeft bigEmpty">{{inItem.createTime}}</view>
								</view>
								<view class="marginTop">{{inItem.content}}</view>
								<view class="lineGray marginTop"></view>
							</view>
						</view>
						<view class="padding"></view>
						<view class="lineGray marginTop"></view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 90rpx;"></view>
		<view class=" bottom-fix-1 column bgWhite width100 ">

			<view class="lineGray"></view>
			<view class=" line  width100  ">
				<!-- <view class="column">
						<view>
								<image class="icon-normal" src="/static/icon-start.png"></image>
							<image class="icon-normal" src="/static/start-yellow.png"></image>
						</view>
						<view class="margin-top-0">
							0
						</view>
					</view> -->
				<view class="column marginLeft padding-small-3">
					<view>
						<image @click="love(item)" v-show="item.loved" class="icon-normal" src="/static/love-red.png">
						</image>
						<image @click="love(item)" v-show="!item.loved" class="icon-normal" src="/static/love-gray.png">
						</image>
					</view>
					<view class="margin-top-0">
						{{item.loveNum}}
					</view>
				</view>
				<view class="column margin-left-3" v-show="false">
					<view>
						<image class="icon-normal" src="/static/msg.png"></image>
					</view>
					<view class="margin-top-0">
						0
					</view>
				</view>
				<view class="margin-left-3 bigEmpty line marginRight">
					<text v-show="comment[0]==' '">
						{{replayName}}
					</text>
					<input class="bigEmpty" placeholder="说点啥吧..." v-model="comment" @input="onInput" />
					<div class=" paddingSmall bg-gray-circle-rect line" @click="send()"> 发送</div>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '/common/request.js';
	export default {
		data() {
			return {
				item: {},
				web: "",
				image: "",
				name: "",
				author: "设辑AI",
				id: 0,
				commentList: [],
				comment: "",
				replayName: "",
				replayId: 0,
				replayList: [],
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		onLoad: function(query) {
			this.id = query.id;
			this.requstInformationData()
			this.queryComment()
		},
		methods: {
			onInput(e) {
				// 【不用v-model绑定表单,直接实时获取值】这种方式是uni-app官方的方式,测试结果正确！
				console.log(e.detail)
				if (!e.detail) {
					this.replayId = 0;
					this.replayName = ""
				}
			},
			commendItemClick(item, list) {

				this.comment = " ";
				this.replayName = "回复 " + item.user.name + "："
				this.replayId = item.id
				this.replayList = list;
				if (item.parentId) {
					this.replayId = item.parentId
				}
				this.$nextTick(function() {
					setTimeout(() => {
						uni.createSelectorQuery().select('.bottomTag').boundingClientRect((res) => {
							console.log(res)
							uni.pageScrollTo({
								scrollTop: res.height,
								duration: 200
							})
						}).exec()
					}, 50)

				});
			},

			send() {
				const that = this
				const url = getApp().globalData.apiUrl + "/api/v1/comment";
				console.log(this.comment)
				request(url, "POST", {
						content: this.comment,
						pictureCollectionId: this.id,
						parentId: this.replayId
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调11', res)
						that.comment = ""
						res.data.child = []
						res.data.user = {
							name: uni.getStorageSync("name"),
							avator: uni.getStorageSync("avator")
						}
						if (that.replayId) {
							that.replayList.push(res.data)
						} else {
							that.commentList.push(res.data)
						}

					}, function(err) {
						console.log('返回错误回调', err)

					})
			},
			love(item) {
				if (item.loved) {
					const url = getApp().globalData.apiUrl + "/api/v1/love";
					request(url, "DELETE", {
							pictureCollectionId: item.id,
						}, uni.getStorageSync("token"))
						.then(function(res) {
							console.log('返回正确回调', res)
							item.loved = false
							item.loveNum = item.loveNum - 1
						}, function(err) {
							console.log('返回错误回调', err)
						})
				} else {
					const url = getApp().globalData.apiUrl + "/api/v1/love";
					request(url, "POST", {
							pictureCollectionId: item.id,
						}, uni.getStorageSync("token"))
						.then(function(res) {
							console.log('返回正确回调', res)
							item.loved = true
							item.loveNum = item.loveNum + 1
						}, function(err) {
							console.log('返回错误回调', err)
						})
				}
			},
			queryComment() {
				const url = getApp().globalData.apiUrl + "/api/v1/comment/all"
				const that = this
				request(url, "GET", {
						pictureCollectionId: this.id,
						size: 100
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调comment', res)
						that.commentList = res.data
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},

			requstInformationData() {
				const that = this;
				const url = getApp().globalData.apiUrl + "/api/v1/pictureCollection/" + this.id;
				request(url, "GET", {}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						that.page4 = that.page4 + 1;
						that.web = res.data.content;
						that.image = res.data.image;
						that.name = res.data.name;
						that.author = res.data.user.name;
						that.item = res.data
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},

		}
	}
</script>

<style>
	@import url("../../common/uni.css");

	.webview {
		width: 100%;
	}
</style>